<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script type="text/javascript" src="./js/global.js" ></script>
        <script type="text/javascript" src="lib/layui/layui.js" ></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    
    <body> 
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
         <div class="layui-fluid">
        <!--按条件查询-->
		<div class="layui-form-item" style="margin-top: 10px; margin-left:10px">
			<form class="layui-form" method="post" onsubmit="return false;">
				<label class="layui-form-mid">用户名:</label> 
				<div class="layui-input-inline" style="width:100px;"> 
					<input type="text" id="Name" name="Name" autocomplete="off" class="layui-input"> 
				</div>
				<label class="layui-form-mid">起止时间:</label>
				<div class="layui-input-inline" style="width:100px;">
					<input type="text" name="begin" id="begin" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"> 
				</div>
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width:100px;"> 
					<input type="text" name="end" id="end" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"> 
				</div>   
				<label class="layui-form-mid">是否锁定:</label> 
				<div class="layui-input-inline" style="width:100px;"> 
					<select id="cc" name="cc"> 
						<option value="">请选择</option> 
						<option value="是">是</option> 
						<option value="否">否</option>
					</select>
				</div> 
				<!--<label class="layui-form-mid">排序:</label> 
				<div class="layui-input-inline" style="width:100px;"> 
					<select id="ord" name="orderBy"> 
						<option value="">请选择</option> 
						<option value="CreateTime">创建时间</option>
						<option value="LastLoginTime">最后登录时间</option> 
					</select> 
				</div> -->
				<div class="layui-input-inline" style="width:100px;">
					<button class="layui-btn" id="search" data-type="reload">搜索</button> 
				</div> 
			</form>  
		</div>
		
		<!--数据表格-->
		<table class="layui-table" id="demo" lay-filter="test">
			<!--顶部工具栏-->
		<script type="text/html" id="toolbar">
			<div class="layui-btn-container">
				
				<button type="button" class="layui-btn" lay-event="add" id="add">添加用户</button>
			</div>
		</script>
		
		<!--行内工具栏-->
		<script type="text/html" id="rtoolbar">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-xs layui-btn-primary" lay-event="setRoleAction">角色</button>
				<button class="layui-btn layui-btn-xs" lay-event="setUserEdit">编辑</button>
				<button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="setUserDel">删除</button>
				<button class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="setResetPwd">重置密码</button>
			</div>
		</script>
			
		</table>
		
		
		<!--行内模版-->
		<script type="text/html" id="checkboxTpl">
			<!-- 这里的 checked 的状态只是演示 -->
			<input type="checkbox" name="{{d.id}}" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.islockout=='是' ? 'checked' : '' }}>
		</script>
</div>
		<!--
        	作者：dell
        	时间：2020-04-14
        	描述：编辑
        -->
		<div id="updateDiv" style="display: none;margin-left: 10px;">
        	<form id="updateForm" lay-filter="updateForm" class="layui-form" action="" method="post" onsubmit="return false;">
				<div class="layui-form-item">
					<label class="layui-form-mid">登录名:</label>
					<div class="layui-input-inline" style="width:350px;">
						<input type="hidden" name="id" class="layui-input">
						<input type="text" disabled name="loginname" class="layui-input">
					</div>

				</div>
				<div class="layui-form-item">
					<label class="layui-form-mid">邮箱:</label>
					<div class="layui-input-inline" style="width:350px;">
						<input type="text" name="protectemail" required="" lay-verify="email" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-mid">手机号:</label>
					<div class="layui-input-inline" style="width:350px;">
						<input type="text" name="phone" required="" lay-verify="required|phone" class="layui-input">
					</div>
				</div>
				<div class="layui-btn-container" style="text-align:center;">
					<button id="updateBtn" class="layui-btn" lay-filter="test1" lay-submit>修改</button>
				</div>
			</form>
		</div>
		<!--
        	作者：dell
        	时间：2020-04-14
        	描述：添加
        -->
		<div id="addDiv" style="display: none;margin-left: 10px;">
        	<form id="addForm" lay-filter="addForm" class="layui-form" action="" method="post" onsubmit="return false;">
    	<div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>登录名:</label>
            <div class="layui-input-inline" style="width:350px;">
                <input type="text" id="LoginName" placeholder="请输入用户名" name="loginName"
                	lay-verify="required" class="layui-input" >
            </div>            
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>密码:</label>
            <div class="layui-input-inline" style="width:350px;">
                <input type="password" id="userpwd" name="pwd" placeholder="请输入密码" 
                	lay-verify="required" class="layui-input" >
            </div>                    
        </div>
        <div class="layui-form-item">                   
             <label class="layui-form-label"><span style="color: red;">*</span>邮箱:</label>
            <div class="layui-input-inline" style="width:350px;">
                <input type="text" id="ProtectEMail" name="email" placeholder="请输入邮箱" 
                	lay-verify="email" autocomplete="off" class="layui-input">
            </div>
        </div>	 
		<div class="layui-form-item">                   
             <label class="layui-form-label"><span style="color: red;">*</span>手机号:</label>
            <div class="layui-input-inline" style="width:350px;">
                <input type="text" id="phone" name="mtel" placeholder="请输入手机号" 
                	lay-verify="required|phone" autocomplete="off" class="layui-input">
            </div>
        </div>	
        <div class="layui-btn-container" style="text-align:center;">
            <button id="addBtn" class="layui-btn" lay-filter="addBtn" lay-submit>添加</button>
    	</div>
	</form>   			
</div>
		<!--
        	作者：dell
        	时间：2020-04-14
        	描述：角色
        -->
		<div id="yh_role" style="display:none">
			<div id="role_transfer" class="demo-transfer"></div>

		</div>
		<script>
			var loadCurr = false;
			layui.use(['laydate', 'layer', 'table', 'form','transfer'], function() {
				var laydate = layui.laydate //日期
					,layer = layui.layer //弹层
					,table = layui.table //表格
					,form = layui.form //轮播
					,transfer=layui.transfer
					,$=layui.$;
					
				//日期
				laydate.render({
					elem: '#begin'
				});
				laydate.render({
					elem: '#end'
				});
				//执行一个 table 实例
				/*数据表格渲染*/
				table.render({
					elem:"#demo",
					url:globalData.server+"getUserAll",
					where:{'token':globalData.getCurToken()},
					method:"post",
					page:true,
					parseData:function(res){
						  return{
							  "code":0,
							  "msg":"1",
							  "count":res.totalElements,
							  "data":res.content
						  }
					 },
					cols:[[
						{field:'loginname',title:'登陆名',width:100},
						{field:'protectemail',title:'密保邮箱',width:180},
						{field:'phone',title:'密保手机号',width:180},
						{field:'createtime',title:'创建时间',width:199},
						{field:'lastlogintime',title:'最后登陆时间',width:199},
						{title:'是否锁定',toolbar:'#checkboxTpl',width:104},
						{title:'操作',toolbar:"#rtoolbar",width:300}
					]],
					id:'testReload',
					toolbar:'#toolbar',
					
				});	
				//数据重载
				
				//查询操作 
				active={
				reload:function(){
					var Name=$("#Name");
					var begin=$("#begin");
					var end=$("#end");
					var cc=$("#cc");
					var ord=$("#ord");
					table.reload("testReload",{
						where:{
						"token":globalData.getCurToken(),
						"name":Name.val(),
						"begintime":begin.val(),
						"endtime":end.val(),
						"islockout":cc.val(),
						"order":ord.val(),
						"roleids":globalData.getRoleids()
						}
						 
					})
				}
			}
				$("#search").on("click",function(){
					var type=$(this).data("type");
					active[type]?active[type].call(this):"";
				});
				
				//监听锁定操作
				form.on('checkbox(lockDemo)', function(obj) {
					var id=this.name;
						/*解锁用户*/
						
						if(obj.elem.checked){
							layer.alert("该用户并未被锁定哦",function(){
								layer.closeAll();
								active.reload();
							});
							
						}else{
							layer.confirm('是否解锁？',function(index){
						$.post(globalData.server+"UnLockUser",{
							'token':globalData.getCurToken(),
							'id':id
						},function(res){
							if(res>0){
								layer.msg("解锁成功");
								active.reload();
						}else{
							layer.alert("解锁失败");
						}
						},"json")
						})
						}
				});
				//监听表单提交
				form.on('submit(test1)', function(data) {
					var d = $("#updateForm").serialize()+"&token="+globalData.getCurToken();
							$.post(globalData.server+"UpdateUser",d,function(res){
								if(res>0){
									layer.closeAll();
									layer.msg("修改成功");
									active.reload();
								}else{
									layer.alert("未知原因修改失败");
								}
							},"json");
							return false;
				});
				//顶部工具栏事件
				table.on('toolbar(test)', function (obj) {
					switch(obj.event){
						case 'add':
						layer.open({
							type:1,
							title:'添加用户',
							content:$("#addDiv"),
							area:['40%','50%']
						})
					}
				});
				//提交添加
				form.on('submit(addBtn)',function(){
					$.post(globalData.server+"CreateUser",{
						'token':globalData.getCurToken(),
						"loginname":$("#LoginName").val(),
						"Password":$("#userpwd").val(),
						"islockout":"否",
						"psdwrongtime":0,
						"protectemail":$("#ProtectEMail").val(),
						"phone":$("#phone").val(),
						"createtime":time(),
						"roleids":globalData.getRoleids()
					},function(obj){
						if(obj>0){
							layer.closeAll();
							layer.msg("成功添加用户");
							location.reload();
						}else{
							layer.alert("登录名重复啦");
						}
					},"json")
					return false;
				})
				
				//监听行工具事件
				table.on('tool(test)', function(obj) {
					var data = obj.data;//获取当前行数的所有数据
					//重置密码
					if(obj.event=="setResetPwd") {
						layer.confirm('确定重置密码吗？',function(index){
							$.post(globalData.server+"ResetPassword",{
								'token':globalData.getCurToken(),
								'id':data.id,
								"name":data.loginname
							},function(res){
								if(res>0){
									layer.alert("重置成功");
									active.reload();
								}else{
									layer.alert("未知原因重置失败");
								}
							},"json")
						})
					} 
					else if(obj.event === 'setRoleAction') { //角色设置
						layer.open({
							type:1,
							title:"设置角色",
							area:['50%','70%'],
							maxmin:true,
							content:$("#yh_role")
						});
					
						$.post(globalData.server+"role/GetRolesAll",{
							'token':globalData.getCurToken()
						},function(a){
							var rdata=new Array();
							$.post(globalData.server+"role/GetRolesByUserIdLayUI",{
								'id':data.id,
								'token':globalData.getCurToken()
							},function(res){
								if(res.success){
									for(var i=0;i<res.data.length;i++){
										rdata.push(res.data[i].id);
									}
								}
								transfer.render({
									elem:'#role_transfer',
									data:a,
									title:['所有角色','当前拥有角色'],
									parseData:function(obj){
										return {
											"value":obj.id,
											"title":obj.name
										}
									},
									value:rdata,
		 							onchange:function(obj,index){
		 								if(index=="0"){
		 									for(var i=0;i<obj.length;i++){
		 										$.post(globalData.server+"AddUserToRole",{
		 											"uid":data.id,
		 											"rid":obj[i].value,
		 											'token':globalData.getCurToken()
		 										},function(r){
		 							
		 										},"json")
		 									}
		 								}else{
		 									for(var i=0;i<obj.length;i++){
		 										$.post(globalData.server+"RemoveUserFromRole",{
		 										"uid":data.id,
		 										"rid":obj[i].value,
		 										'token':globalData.getCurToken()
		 										},function(r){
		 							
		 									},"json")
		 								}
		 							}
		 						},
								})
							},"json");
						},"json");
					} 
					else if(obj.event == 'setUserDel') { //删除操作
						
						layer.confirm('确定删除吗？',function(){
							$.post(globalData.server+"DeleteUser",{
								'token':globalData.getCurToken(),
								'id':data.id
							},function(res){
								if(res>0){
									layer.msg("删除成功");
									active.reload();
								}else{
									layer.alert("该用户有其他权限无法删除哦");
								}
							},"json");
						})
						}
					else if(obj.event == 'setUserEdit') {//编辑
						form.val("updateForm",obj.data);
						layer.open({
							type:1,
							title:'修改',
							content:$("#updateDiv"),
							area:['450px','500px']
						})
					}					
				});
				//当前时间			
function time() {
	var d = new Date();
	var year = d.getFullYear();
	var month = change(d.getMonth() + 1);
	var day = change(d.getDate());
	var hour = change(d.getHours());
	var minute = change(d.getMinutes());
	var second = change(d.getSeconds());

	function change(t) {
		if(t < 10) {
			return "0" + t;
		} else {
			return t;
		}
	}
	var time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
	return time;
}		
			});
			

		</script>
	</body>
</html>